<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
  <title>Theme sets test plan</title>
  <link rel="stylesheet" type="text/css" href="../css/testplan.css" />

 </head>

<body>
	<div class="navbar">

		<a href="./" title="show directory contents"><code>./</code> (show contents of this directory)</a>

		&nbsp;&nbsp;&nbsp;&nbsp;

		<a href="../" title="show directory contents"><code>../</code> (show contents of parent directory)</a>

	</div>

	<hr />
	<h1 class="test_title">Theme sets test plan</h1>
		<p class="automatedTestCase">
	Note instead of running this test suite manually you can use the automated seleniumIDE test suite - 
	test/seleniumIdeTestCases/themeSets/ThemeSetsTestSuite.html</p>
	<h2 class="test_section">Add new theme set.</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>Choose New Theme from the main menu.</li>
		<li>Select <i>claro</i> from the drop down list <b>Theme to clone</b>.</li>
		<li>Enter <i>claro2</i> in the <b>new name box.</b></li>
	    <li>When the theme editor is displayed select the global widget and change the background color. Save the theme and close the theme editor.</li>
	    <li>Choose New Theme from the New menu.</li>
	    <li>Select <i>custom</i> from the drop down list <b>Theme to clone</b>.</li>
	    <li>Enter <i>custom2</i> in the <b>new name box.</b></li>
	    <li>When the theme editor is displayed select the global widgets and change the background color. Save the theme and close the theme editor.</li>
	    <li>Choose <b>settings-&gt;Theme sets </b> from the main menu.</li>
	    <li>From the <b>Manage theme sets</b> dialog, click on the <b>+</b> below the <b>Theme sets:</b> selection list. A theme set called <i>site_dojo_default_1</i> Should be added to the list of themes.</li>
	    <li>With the <i>site_dojo_default</i> theme set still selected in the <b>Theme sets:</b> selection list click on the <b>+</b> a theme set called <i>site_dojo_default_2</i> should be added to the list.</li>
	    <li>Click-select on the the <i>site_dojo_default_2</i> theme set in the <b>Theme sets:</b> selection list, then click on the <b>+</b> a theme set called <i>site_dojo_default_2_1</i> should be added to the list.</li>
	    <li>Click <b>Save.</b></li>
	    <li>Reopen Manage theme sets <b>Settings -&gt; Theme sets</b></li>
  </ol>
 
  <h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
    	<li ><b>Theme sets:</b> selection list should have the following theme sets.
	    	<ol type="a">
			    <li><i>site_dojo_default</i></li>
			    <li><i>site_dojo_default_1</i></li>
		    	<li><i>site_dojo_default_2</i></li>
		    	<li ><i>site_dojo_default_2_1</i></li>
	    	</ol>
    	</li>
  </ol>


  <h2 class="test_section">Remove theme sets unsaved</h2>
  <h3 class="steps_subsection">Steps</h3>
  <ol>
    <li>Continuing from the test case above, with the <b>Manage theme sets</b> dialog displayed.</li>
    <li>Select <i>site_dojo_default_2</i> in the <b>Theme sets:</b> selection list.</li>
    <li>Click on the <b>"x"</b> below the <b>Theme set:</b> selection list, <i>site_dojo_default_2</i> should be removed from the list.</li>
    <li>Select <i>site_dojo_default_2_1</i> in the <b>Theme sets:</b> selection list.</li>
    <li>Click on the <b>"x"</b> below    the <b>Theme set:</b> selection list,    <i>site_dojo_default_2_1 </i>should be removed from the    list.</li>
    <li>Click <b>Cancel</b>    button.</li>
    <li>Reopen Manage theme sets <b>Settings -&gt;    Theme sets</b> </li>
  </ol>

  <h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
     <li><b>Theme sets:</b> selection list should have the following theme sets.
		<ol type="a">
    		<li ><i>site_dojo_default</i></li>
    		<li ><i>site_dojo_default_1</i></li>
    		<li ><i>site_dojo_default_2</i></li>
    		<li ><i>site_dojo_default_2_1</i></li>
   		</ol>
 	</li>
 	</ol>


  <h2 class="test_section">Remove theme sets save</h2>
  <h3 class="steps_subsection">Steps</h3>
  <ol>
    <li >Continuing from the test case above, with the <b>Manage theme sets </b> dialog displayed.</li>
    <li> Select <i>site_dojo_default_1</i>in the <b>Theme sets:</b> selection list.</li>
    <li >Click on the<b> &quot;x&quot;</b> below the <b>Theme set:</b> selection list, <i>site_dojo_default_1</i> should be removed from the    list.</li>
    <li >Select <i>site_dojo_default_2_1</i> in the Theme    sets: selection list.</li>
    <li >Click on the <b>&quot;x&quot; </b>below    the <b>Theme set:</b> selection list,    <i>site_dojo_default_2_1</i>should be removed from the    list.</li>
    <li >Click <b>Save</b>    button.</li>
    <li >Reopen Manage theme sets <b>Settings -&gt;    Theme sets</b></li>
  </ol>

  <h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
   		<li ><b>Theme sets:</b> selection list should have the following theme sets.
			<ol type="a">
				<li ><i>site_dojo_default</i></li>
				<li ><i>site_dojo_default_2</i></li>
			</ol>
		</li>
	</ol>
	
 <h2 class="test_section">Rename theme sets</h2>
  <h3 class="steps_subsection">Steps</h3>
  <ol>
    <li >Continuing from the test case above, with the <b>Manage theme sets </b> dialog displayed.</li>
	<li >Select <i>site_dojo_default_2 </i> in the <b>Theme  sets: </b>selection list.</li>
	<li >Click on the <b>Rename</b>   button.</li>
    <li >The <b>Rename theme set </b>dialog should be displayed, enter <i>my_theme_set </i>in the text box.</li>
	<li >Click <b>Rename</b></li>
	<li >Click <b>Save</b> to commit the rename and close the dialog.</li>
	<li >Reopen Manage theme sets <b>Settings -&gt; Theme sets</b></li>
  </ol>
  
  <h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li ><b>Theme sets:</b> selection list should have the following theme sets.
		  <ol type="a">
		  	<li ><i>site_dojo_default</i></li>
		  	<li ><i>my_theme_set</i></li>
		  </ol>
	     </li>
    	<li ><b>The Name:</b> text box should contain <i>my_theme_set</i></li>
  </ol>

  <h2 class="test_section">Modify theme sets</h2>
  <h3 class="steps_subsection">Steps</h3>
	<ol>
    	<li >Continuing from the test case above, with the <b>Manage theme sets</b> dialog displayed.</li>
    	<li >Select <i>my_theme_set</i>   in the <b>Theme sets:</b> selection    list.</li>
	    <li >Select <i>claro2</i> in    the <b>Dojo desktop 1.7 theme:</b> drop    down.</li>
		<li >Select <i>custom2</i> in    the <b>Dojo mobile 1.7 theme:</b> drop    down.</li>
   		<li >Select <i>site_dojo_default</i> in the <b>Theme sets:</b> selection  list.</li>
	    <li >Click the <b>&quot;+&quot;</b> below the Theme sets: selection list.</li>
 		<li >Select <i>site_dojo_default_1</i> in the <b>Theme sets:</b> selection list.</li>
		<li >Select <i>(device-specific)</i> in    the <b>Dojo mobile 1.7 theme:</b> drop    down.</li>
		<li >Select <i>android</i> from the <b>Android</b> drop down list.</li>
		<li >Select <i>custom2</i> from  the <b>Blackberry</b> drop down list.</li>
    	<li >Select <i>ipad</i> from the <b>iPad</b> drop down list.</li>
    	<li >Select <i>iphone</i> from    the <b>iPhone</b> drop down list.</li>
    	<li >Select <i>iphone</i> from    the <b>Other</b> drop down list.</li>
    	<li >Click the <b>Rename</b>    button</li>
    	<li >The <b>Rename theme    set</b> dialog should be displayed, enter <i>dojo_theme_set</i> in the text box.</li>
    	<li >Click <b>Rename</b></li>
    	<li >Click <b>Save</b> to save the theme    sets.</li>
    	<li >Reopen Manage Theme sets dialog <b>Settings-&gt;Theme sets.</b></li>
  	</ol>

  <h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
    	<li ><b>Theme sets:</b> selection list should have the following theme sets:
			<ol type="a">
				<li ><i>site_dojo_default</i></li>
				<li ><i>my_theme_set</i></li>
				<li ><i>dojo_theme_set</i></li>
			</ol>
		<li >Select site_dojo_default in the Theme sets selection list
			<ol type="a">
				<li ><b>Name</b> text box should contain dojo_theme_set .</li>
				<li ><i>claro</i> should be selected in the <b>Dojo desktop</b> drop  down.</li>
				<li ><i>(device-specific)</i> should be selected in the <b>Dojo mobile</b> drop  down.</li>
				<li ><i>android</i> should be displayed in the <b>Android </b>drop  down.</li>
				<li ><i>blackberry</i> should be displayed in the <b>Blackberry</b> drop   down.</li>
				<li ><i>ipad</i> should be displayed in the <b>iPad</b> drop down.</li>
				<li ><i>iphone</i> should be displayed in the <b>iPhone</b> drop down.</li>
				<li ><i>iphone</i> be displayed in the <b>Other</b> drop down.</li>
			</ol>
		</li>
		<li>Select <i>my_theme_set</i> in the <b>Theme sets</b> selection list
			<ol type="a">
    			<li><b>Name</b> text box should contain <i>my_theme_set.</i></li>
				<li ><i>claro2</i> should be selected in the <b>Dojo desktop</b> drop down.</li>
				<li><i>custom2</i> should be selected in the <b>Dojo mobile drop</b>  down.</li>
				<li><i>custom2 </i>should be displayed but disabled in the<b> Android </b>drop  down.</li>
				<li ><i>custom2 </i>should be displayed but disabled in the <b>Blackberry</b> drop    down.</li>
				<li ><i>custom2</i> should be displayed but disabled in the<b> iPad</b> drop    down.</li>
  				<li ><i>custom2</i> should be displayed but disabled in the<b> iPhone</b> drop    down.</li>
  				<li ><i>custom2</i> should be displayed but disabled in the<b> Other</b> drop    down.</li>
  			</ol>
 		</li>
		<li >Select dojo_theme_set in the Theme sets selection list
			<ol type="a">
				<li ><b>Name</b> text box should contain dojo_theme_set .</li>
				<li ><i>claro</i> should be selected in the <b>Dojo desktop</b> drop  down.</li>
				<li ><i>(device-specific)</i> should be selected in the <b>Dojo mobile</b> drop  down.</li>
				<li ><i>android</i> should be displayed in the <b>Android </b>drop  down.</li>
				<li ><i>custom2</i> should be displayed in the <b>Blackberry</b> drop   down.</li>
				<li ><i>ipad</i> should be displayed in the <b>iPad</b> drop down.</li>
				<li ><i>iphone</i> should be displayed in the <b>iPhone</b> drop down.</li>
				<li ><i>iphone</i> be displayed in the <b>Other</b> drop down.</li>
			</ol>
		</li>
	</ol>
	
  <h2 class="test_section">Applying theme sets to HTML</h2>
  <h3 class="steps_subsection">Steps</h3>			
  <ol>
  	<li >Continuing from the test case above, create a new html file with a <i>iphone</i> composition type.</li>
  	<li >Drag and drop a mobile Heading widget on the canvas.</li>
  	<li >Using the gear icon for the page editor toolbar, choose the <b>Switch theme</b> command.
  			(Note: you will probably be asked to save your document before the dialog comes up.)</li>
  	<li >The theme switching dialog should be displayed with the <b>Theme set:</b> text box displaying <i>(none)</i></li>
  	<li >Select <i>site_dojo_default</i> from the <b>Theme sets</b> drop down: The following  should be displayed:
		<ol type="a">
			<li ><i>claro</i> should be selected but disabled in the <b>Dojo desktop</b> drop  down.</li>
			<li ><i>custom</i> should be selected but disabled in the <b>Dojo mobile</b> drop  down.</li>
			<li ><i>custom</i> should be displayed but disabled in the <b>Android</b> drop down.</li>
			<li ><i>custom</i> should be displayed but disabled in the <b>Blackberry</b> drop down.</li>
			<li ><i>custom</i> should be displayed but disabled in the <b>iPad</b> drop down.</li>
			<li ><i>custom</i> should be displayed but disabled in the <b>iPhone</b> drop  down.</li>
			<li ><i>custom</i> should be displayed but disabled in the <b>Other</b> drop  down.</li>
		</ol>
	</li>
	<li >Select <i>my_theme_set</i> from the <b>Theme sets</b> drop down, the following  should be displayed:
		<ol type="a">
			<li ><i>claro2</i> should be selected but disabled in the <b>Dojo desktop</b> drop down.</li>
			<li ><i>custom2</i> should be selected but disabled in the <b>Dojo mobile</b> drop down.</li>
			<li ><i>custom2 </i> should be displayed but disabled in the <b>Android</b> drop down.</li>
			<li ><i>custom2</i> should be displayed but disabled in the <b>Blackberry</b> drop down.</li>
			<li ><i>custom2</i> should be displayed but disabled in the <b>iPad</b> drop  down.</li>
			<li ><i>custom2</i> should be displayed but disabled in the <b>iPhone</b> drop down.</li>
			<li ><i>custom2</i> should be displayed but disabled in the <b>Other</b> drop down.</li>
		</ol>
	</li>
	<li >Select <i>dojo_theme_set</i> from the <b>Theme sets</b> drop down, the following should be displayed:
		<ol type="a">
			<li ><i>claro</i> should be selected but disabled in the <b>Dojo desktop</b> drop down.</li>
			<li ><i>(device_specific)</i> should be selected but disabled in the <b>Dojo mobile</b> drop down.</li>
			<li ><i>android</i> should be displayed but disabled in the <b>Android</b> drop down.</li>
			<li ><i>custom2</i> should be displayed but disabled in the <b>Blackberry</b> drop down.</li>
			<li ><i>ipad</i> should be displayed but disabled in the <b>iPad</b> drop down.</li>
			<li ><i>iphone</i> should be displayed but disabled in the <b>iPhone</b> drop down.</li>
			<li ><i>iphone</i> should be displayed but disabled in the <b>Other</b> drop down.</li>
		</ol>
	</li>
	<li >Click <b>Select</b> button</li>
  </ol>

  <h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li >Click on the <b>Display source</b> icon from the designer toolbar, examine the source you should see the following in the <i>data-dojo-config</i> parameter of the dojo.js script link:
			<ol type="a">
				<li ><i>'themeMap':[['Android','',['themes/android/android.css']],['BlackBerry','',['themes/custom/custom.css']],['iPad','',['themes/ipad/ipad.css']],['iPhone','',['themes/iphone/iphone.css']],['.*','',['themes/iphone/iphone.css']]],'mblThemeFiles':[]</i></li>
   			</ol>
   		</li>
  	</ol>
   		
  <h2 class="test_section">Restore dojo default theme to HTML</h2>
  <h3 class="steps_subsection">Steps</h3>	
  	<ol>
  		<li >Continuing from the test case above, Still in source view.</li>
  		<li >Using the gear icon for the page editor toolbar, choose the <b>Switch theme</b> command.
  			(Note: you will probably be asked to save your document before the dialog comes up.)</li>
  		<li >The theme switching dialog should be displayed with the <i>dojo_theme_set</i> in the <b>Theme  sets </b> drop down, the following should be displayed:
  			<ol type="a">
  				<li ><i>claro</i> should be selected but disabled in the <b>Dojo desktop</b> drop down.</li>
  				<li ><i>(device-specific)</i> should be selected but disabled in the <b>Dojo mobile</b> drop down.</li>
  				<li ><i>android</i> should be displayed but disabled in the <b>Android</b> drop  down.</li>
  				<li ><i>custom2</i> should be displayed but disabled in the <b>Blackberry</b> drop down.</li>
  				<li ><i>ipad</i> should be displayed but disabled in the <b>iPad</b> drop down.</li>
  				<li ><i>iphone</i> should be displayed but disabled in the <b>iPhone</b> drop down.</li>
  				<li ><i>iphone</i> should be displayed but disabled in the <b>Other</b> drop down.</li>
			</ol>
		</li>
		<li >Select <i>(none)</i> from the <b>Theme sets<</b> drop down: Select the following:
			<ol type="a">
				<li >Select <i>claro</i> in the <b>Dojo desktop</b> drop down.</li>
				<li >Select <i>(device-specific)</i> in the <b>Dojo mobile</b> drop down.</li>
				<li >Select <i>android</i> in the <b>Android</b> drop down.</li>
				<li >Select <i>blackberry</i> in the <b>Blackberry</b> drop down.</li>
				<li >Select <i>ipad</i> in the <b>iPad</b> drop down.</li>
				<li >Select <i>iphone</i> in the <b>iPhone</b> drop down.</li>
				<li >Select <i>iphone</i> in the <b>Other</b> drop down.</li>
			</ol>
		</li>
		<li >Click <b>Save</b> button</li>
	</ol>
	
  	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li >Click on the <b>Display source</b> icon from the designer toolbar, examine the source you should see the following in the <i>data-dojo-config</i> parameter of the dojo.js script link:
			<ol type="a">
				<li ><i>
				'themeMap':[['Android','',['themes/android/android.css']],['BlackBerry','',['themes/blackberry/blackberry.css']],['iPad','',['themes/ipad/ipad.css']],['iPhone','',['themes/iphone/iphone.css']],['.*','',['themes/iphone/iphone.css']]],'mblThemeFiles':[], 'mblLoadCompatPattern': ''
  			</ol>
   		</li>
	</ol>
  </body>
</html>
